<template>
    <div class="main el-mg-20">
        <!-- 表格过滤 -->
        <el-form
            :inline="true"
            :size="$formSize"
            class="table-filter el-box-init el-bkgd-white"
        >
            <el-form-item label="关键词" class="el-mg-r-30">
                <el-select
                    v-model="search.keywor"
                    filterable
                    remote
                    placeholder="请输入文章标题"
                    :remote-method="getArticle"
                    :loading="articles.loading"
                >
                    <el-option
                        v-for="item in articles.list"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="文章类型" class="el-mg-r-30">
                <el-select
                    v-model="search.category_id"
                    placeholder="请选择被评论文章类型"
                    @visible-change="getCategory"
                >
                    <el-option
                        v-for="item in categorys"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="success"
                    round
                    icon="el-icon-search"
                    @click="onSearch"
                >
                    查询
                </el-button>
                <el-button
                    type="warning"
                    round
                    icon="el-icon-refresh"
                    @click="onReset"
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <div class="table-wrap el-box-init el-bkgd-white">
            <!-- 表格 -->
            <el-table
                v-loading="table.loading"
                :data="table.list"
                :size="$tableSize"
                stripe
                border
                row-key="id"
                :tree-props="{
                    children: 'childrens',
                    hasChildren: 'hasChildren',
                }"
            >
                <el-table-column prop="id" label="ID" width="80">
                    <template slot-scope="{ row }">
                        <span
                            :class="
                                !row.childrens && row.comment_level == 1
                                    ? 'option-level0'
                                    : ''
                            "
                        >
                            {{ row.id }}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column prop="article_title" label="文章标题">
                </el-table-column>

                <el-table-column
                    prop="category_title"
                    label="所属分类"
                    width="100"
                    align="center"
                >
                </el-table-column>

                <el-table-column
                    prop="account"
                    label="评论用户"
                    width="100"
                    align="center"
                >
                    <template slot-scope="{ row }">
                        {{ row.account }}
                        <span v-if="row.role"> ({{ row.role_name }}) </span>
                    </template>
                </el-table-column>

                <el-table-column prop="content" label="评论内容">
                    <template slot-scope="{ row }">
                        <div v-html="row.content"></div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="reply_account"
                    label="被回复用户"
                    width="100"
                    align="center"
                >
                    <template slot-scope="{ row }">
                        {{ row.reply_account }}
                        <span v-if="row.reply_role">
                            ({{ row.reply_role_name }})
                        </span>
                    </template>
                </el-table-column>

                <el-table-column prop="reply_content" label="被回复内容">
                    <template slot-scope="{ row }">
                        <div v-html="row.reply_content"></div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="created_time"
                    label="评论时间"
                    width="150"
                >
                    <template slot-scope="{ row }">
                        {{ row.created_time | formatTime }}
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    align="center"
                    :width="$maxActionWidth"
                >
                    <template slot-scope="{ row }">
                        <el-button
                            :size="$btnSize"
                            icon="el-icon-view"
                            type="success"
                            v-if="isAuth('BSS_COMMENT_DETAIL')"
                            @click="onDetail(row.id)"
                        >
                            查看详情
                        </el-button>
                        <el-button
                            size="mini"
                            type="warning"
                            icon="el-icon-edit-outline"
                            v-if="isAuth('BBS_COMMENT_REPLY')"
                            @click="onAddOrReply(row)"
                        >
                            回复
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="isAuth('BBS_COMMENT_DEL')"
                            @click="onDel(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 表格分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.currentPage"
                :page-sizes="table.pageSizes"
                :page-size="table.pageSize"
                :layout="table.layout"
                :total="table.total"
                background
            >
            </el-pagination>
        </div>
        <dialog-detail ref="detail" :id="table.rowId"></dialog-detail>
        <dialog-add-or-reply
            ref="addRefs"
            :id="table.rowId"
            :articleId="table.article_id"
        />
    </div>
</template>

<script>
import { comment as Api } from "api";
import DialogDetail from "./detail.vue";
import DialogAddOrReply from "./add-or-reply.vue";

export default {
    components: {
        DialogDetail,
        DialogAddOrReply,
    },
    data() {
        return {
            allDelBtnVisible: false, // 表格全选

            categorys: [], // 分类列表

            articles: {
                loading: false,
                list: [],
            },

            search: {
                article_id: "",
                category_id: "",
                keywor: "",
            },

            //表格
            table: {
                loading: false,
                rowId: 0,
                article_id: 0,
                list: [],
                currentPage: this.$config.pagination.currentPage, // 默认页
                pageSize: this.$config.pagination.pageSize, // 每页多少条
                pageSizes: this.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: this.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总条数
            },
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            let { keywor, article_id } = this.$route.query;
            this.search.keywor = keywor || "";
            this.search.article_id = article_id || "";

            this.getList();
        },
        /* 获取文章分类列表 */
        async getCategory(status) {
            if (status) {
                const { code, msg, data } = await this.$axios.get(
                    Api.getCategory
                );

                if (code == 200) {
                    this.categorys = data.list;
                }
            }
        },

        /* 获取文章列表 */
        async getArticle(query) {
            if (query != "") {
                this.articles.loading = true;

                const { code, msg, data } = await this.$axios.get(
                    Api.getArticle,
                    {
                        params: { keywor: query },
                    }
                );

                if (code == 200) {
                    this.articles.list = data.list;

                    this.articles.loading = false;
                }
            } else {
                this.articles.list = [];
            }
        },
        /* 获取列表 */
        async getList() {
            const { code, msg, data } = await this.$axios.get(Api.getList, {
                params: {
                    keywor: this.search.article_id
                        ? this.search.article_id
                        : this.search.keywor,
                    category_id: this.search.category_id,
                    page: this.table.currentPage, //查询第几页
                    per_page: this.table.pageSize, //每页多少条数据
                },
            });

            if (code == 200) {
                this.table.list = data.list;
                this.table.total = data.total;
            } else {
                this.$msg.error("暂无评论");
            }
            // 关闭加载提示
            this.table.loading = false;
        },

        /* 查看评论 */
        onDetail(id) {
            this.table.rowId = id;
            this.$refs["detail"].visible = true; // 弹窗开关
        },
        // 新增/回复
        onAddOrReply(row) {
            this.table.rowId = row.id;
            this.table.article_id = row.article_id;
            this.$refs.addRefs.visible = true; // 弹窗开关
        },

        // 删除回复
        async onDel(id) {
            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
            });

            if (confirm) {
                const { code, msg, data } = await this.$axios.delete(Api.del, {
                    data: { id },
                });

                if (code === 200) {
                    this.$msg.success(msg);
                    this.getList();
                }
            }
        },

        /* 查询 */
        onSearch() {
            this.table.loading = true;
            this.getList();
        },
        /* 重置 */
        onReset() {
            this.search = {
                keywor: "",
                category_id: "",
            };
        },
        /* 每页多少条 */
        handleSizeChange(val) {
            this.table.loading = true;
            this.table.pageSize = val;
            this.getList();
        },
        /* 当前页  */
        handleCurrentChange(val) {
            this.table.loading = true;
            this.table.currentPage = val;
            this.getList();
        },
    },
};
</script>